もう一つのカンファレンス AltConf で EVFL の話を聞いてきました #WWDC19 #AltConf19

こんにちは、モバイルアプリサービス部の田中孝明です。

毎年恒例ですが、 WWDC の 隣で AltConf 2019 というカンファレンスが同時に開催されています。こちらではCFPに通ったエンジニアの方々が登壇されています。

今回は ZOZO Technologies, Inc の BAN Jun さんの Auto Layout with an extended Visual Format Language という発表を聞いてきました。 banjun/NorthLayout の話が聞けそうでしたので、会場を抜け出してセッションを聞いてきました。

Description

Visual Format Language (VFL) is provided by UIKit light-weight way to define Auto Layout programmatically. Unfortunately it is not capable of making constraints to neither Safe Area or Layout Margins.

To solve this problem I made banjun/NorthLayout library, which proposes an extended VFL for supporting constraints to Layout Margins. Although there is no direct support for Safe Area, with Layout Margins it’s possible to set constraints to Safe Area as well. banjun/NorthLayout made with kareman/FootlessParser, that is a parser-combinator which can be easily used thanks to Swift’s type system. And in this talk I’ll show you how my library allows to set Safe Area constraints with an almost no changes of your app code.

Auto Layout with Code

Auto Layout をコードで書く

• DSL Library
• Visual Format Language
• Layout Anchors

Auto Layout with Visual Format Language (VFL)

例として Auto Layout を Visual Format Language (VFL) で表現します

"H:|-[icon(==32)]-[label]-(>=8)—|"

良い点

• コンパクトな式を使用して複数の制約を一度に設定
  • アスキーアートのようで、違いが読みやすい
• 有効な制約のみを作れる

悪い点

• VFL はコンパイル時に検証されない
• 使用するためにいくつかのボイラープレートが必要
• Layout Margins または Safe Area のいずれにも明示的なサポートがない

banjun/NorthLayout

NorthLayout を使わない場合の手順

• View の View階層 を設定する
• View に対して、 auto-layout を有効にする
• 複数のパラメータを VFL で書く

NorthLayout を使う場合の手順

• View を宣言する
• VFL を書く
  • autolayout("...")

VFL と Safe Area

• VFL は Safe Area （iPhone X）をサポートしていない
• しかし、私は VFL と同じくらい簡単に制約を書きたい

Auto Layout with an extended VFL

VFL (Apple)

• single vertical bar | = superview bounds
  • autolayout("H:|[header]|")

Extended VFL (EVFL)

Safe Area の制約を || で表現したい

• double vertical bars || = layout margin bounds
  • autolayout("H:||[icon]...

なぜ Layout Margins なのか?

• Layout Margins が Safe Area に追従する
• Layout Margins はすべてのデバイスで使える
  • ホームインジケータ付きのデバイスだけではない
  • どのデバイスでもレイアウトの制約をテスト

EVFL の実装

EVFL をパースしてATS構文木にし、分解してVFLが解釈できるようにする

最小限の差分で Safe Area をサポート

まとめ

iOS開発を離れてだいぶ経つため、iPhone X 対応をやったことがない自分にとっては Safe Area の辛さなどを知るいい機会になりました。SwiftUI が出ても複雑な View は Auto Layout （もしくは Not Auto Layout）で対応する必要があると思いますので、このあたりの情報は参考になります。

参照

• AltConf 2019
• AltConf Schedule
• banjun/NorthLayout